<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    
    <div id="box">
        <input type="checkbox"><span>apple - </span> <span>10</span> <input type="number" min=0 value="1" ><br />
        <input type="checkbox"><span>香梨 - </span> <span>15</span> <input type="number" min=0 value="1" ><br />
        <input type="checkbox"><span>火腿肠 - </span> <span>56</span> <input type="number" min=0 value="1" ><br />
        <input type="checkbox"><span>中华烟 - </span> <span>70</span> <input type="number" min=0 value="1" ><br />
    </div>
    全选/反选<input type="checkbox" id="qx">
    <h3>总价:<span id="spa">0元</span></h3>
    <script>
        $(function () { //另一个对象的目的是除了点击复选框能算价格，点击加减号也能算价格
            $('#box :checkbox,[min=0]').change(function () { //多个对象使用一个方法
                var zong = 0
                $('#box :checkbox').each(function () { //checked选中状态，重新将有此属性的对象循环一遍，否则，无法识别哪一个对象，不能发挥作用
                    if ($(this).prop('checked')) {
                        var price = $(this).next().next().html()
                        //console.log(price)
                        var numb = $(this).next().next().next().val()
                            zong +=  price*numb
                    }
                })
                $("#spa").html(zong)

            })
            //全选
            $("#qx").click(function () {
                var flag = $(this).prop("checked")
                $('#box :checkbox').prop("checked", flag)
                $('#box :checkbox').change() //调用函数
            }) 

        })
    </script>
</body>
</html>